<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<link href="../../ux.calendar/jquery.ux.calendar.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.calendar/jquery.ux.calendar.js" type="text/javascript"></script>
<title>jquery.ux.calendar</title>
</head><body>

<a href="./">&laquo; Index</a>

<script type="text/javascript">
jQuery(function($){
	// the calendar...
	$('#calendar').calendar()
		.bind("select:calendar",function( ev, ms ){
			var date = new Date( ms );
			date = [ date.getMonth()+1, date.getDate(), date.getFullYear() ];
			$('#date').val( date.join('/') );
			});
	// the input...
	$('#date')
		.bind("blur",function(){
			$('#calendar').ux("calendar.select", this.value );
			});
	});
</script>

<h2>ux.calendar / callbacks</h2>

Date: <input type="text" id="date" />

<div id="calendar"></div>

</body></html>